<template>
    <div>
        <el-dialog title='' :visible.sync="isShow" @close="onClose" width="80%">
            <div class="common-view">
                <div style="text-align: center;font-size: 0.1rem;color: black;height: 50px;">
                    教师薪资费用统计表
                </div>
                <div style="height: calc(60vh - 50px)">
                    <el-table :data="tableData" class="hide-scrollbar" height="calc(60vh - 50px)"
                              :header-cell-style="headClass" :cell-style="rowClass" border>
                        <el-table-column prop="name" label="教师姓名">
                        </el-table-column>
                        <el-table-column prop="value" label="基础工资">
                        </el-table-column>
                        <el-table-column prop="value" label="岗位工资">
                        </el-table-column>
                        <el-table-column prop="value" label="绩效奖金">
                        </el-table-column>
                        <el-table-column prop="value" label="交通补助">
                        </el-table-column>
                        <el-table-column prop="value" label="餐食补助">
                        </el-table-column>
                        <el-table-column prop="value" label="正课课时数">
                        </el-table-column>
                        <el-table-column prop="value" label="岗位课时数">
                        </el-table-column>
                        <el-table-column prop="value" label="课时单价">
                        </el-table-column>
                        <el-table-column prop="value" label="加课课时1">
                        </el-table-column>
                        <el-table-column prop="value" label="加课单价">
                        </el-table-column>
                        <el-table-column prop="value" label="小计">
                        </el-table-column>
                        <el-table-column prop="value" label="社保">
                        </el-table-column>
                        <el-table-column prop="value" label="五险一金">
                        </el-table-column>
                        <el-table-column prop="value" label="请假时长">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="bottom-view">
                <div class="bottom-div-view">
                    <div class="btn-view">
                        上一页
                    </div>
                    <div class="btn-view">
                        下一页
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getDeptCoursePriceList} from '@/api/teacher.js'
    export default {
        props: ['isShowDialog','deptTeacherId'],
        data() {
            return {
                tableData:[],
                headerUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,

            }
        },
        watch: {
            deptTeacherId:{
                handler(newDeptId, oldDeptId) {
                    this.deptId = newDeptId;
                    console.log("deptId",this.deptId)
                },
                deep: true
            }
        },
        created() {
            this.getHourStatisticsInfo();
        },
        computed: {},
        methods: {
            getHourStatisticsInfo(){
                getDeptCoursePriceList({
                    deptId:this.deptTeacherId,
                    searchDate:'2025-01',
                }).then((res) => {
                    console.log(res)
                    if (res.code == 0){

                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeHourStatistics')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:5px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:5px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(60vh);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        margin-top: 10vh !important;
        -webkit-transform: none;
        transform: none;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    /deep/ .el-dialog__header {
        padding: 0 !important;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    /deep/ .el-button--medium.is-round {
        padding: 0.08rem 0.2rem;
        font-size: 0.11rem;
        border-radius: 0.2rem;
    }

    .bottom-view {
        margin-bottom: 10px;
        margin-top: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .bottom-div-view {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: end;

            .btn-view {
                width: 80px;
                height: 35px;
                line-height: 35px;
                background: #0A77F9;
                color: white;
                text-align: center;
                border-radius: 5px;
                margin-right: 15px;
            }
        }
    }

    .common-drop-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 10px;

        .common-drop-color {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .common-drop-gary {
            background: #d0d0d0;
        }

        .common-drop-blue {
            background: blue;
        }

        .common-drop-green {
            background: green;
        }

        .common-drop-red {
            background: red;
        }
    }

</style>

